<template>
  <div class="app">
    <m-header class="header">
      <div slot="middle" class="tab">
        <router-link :to="{ path: '/my' }" tag="div" v-ripple>我的</router-link>
        <router-link :to="{ path: '/discovery' }" tag="div" v-ripple>发现</router-link>
        <router-link :to="{ path: '/cloudVillage' }" tag="div" v-ripple>云村</router-link>
        <router-link :to="{ path: '/test' }" tag="div" v-ripple>视频</router-link>
      </div>
      <div slot="left">
        <i class="iconfont icon-gengduo" />
      </div>
      <div slot="right">
        <i class="iconfont icon-sousuo" />
      </div>
    </m-header>
    <div class="content">
      <keep-alive>
        <router-view />
      </keep-alive>
    </div>
    <player />
  </div>
</template>
<script>
import MHeader from 'base/m-header'
import player from 'components/player'

export default {
  components: {
    MHeader,
    player
  }
}
</script>
<style lang="less" scoped>
@import '~@/style/variable.less';
.app{
  display: flex;
  flex-direction: column;
  height: 100%;
  .tab{
    font-size: @font-size-normal;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    div{
      flex: 1;
      text-align: center;
      color: #666;
      text-decoration: none;
      // border-radius: 100%;
    }
  }
  .header{
    width: 100%;
  }
  .content{
    flex: 1;
    overflow: hidden;
  }
}
</style>
